<template>
  <div>
    <el-card class="box-1">
      <div slot="header"><span>业绩订单-审核</span></div>
      <el-form ref="form" :model="form" :rules="formRules" label-position="left" label-width="150px">
        <el-row type="flex" justify="space-around">
          <el-col :span="10">
            <el-form-item label="业绩订单号">
              {{ form.member_name }}
            </el-form-item>
            <el-form-item label="客户名称">
              {{ form.member_name }}
            </el-form-item>
            <el-form-item label="客户手机">
              {{ form.member_phone }}
            </el-form-item>
            <el-form-item label="公司">
              {{ form.company }}
            </el-form-item>
            <el-form-item label="职位">
              {{ form.position }}
            </el-form-item>
            <el-form-item label="类型" prop="type">
              {{ form.type===0?'个人':'企业' }}
            </el-form-item>
            <el-form-item label="腾讯云ID">
              {{ form.qq }}
            </el-form-item>
            <el-form-item label="微信">
              {{ form.wechat }}
            </el-form-item>
            <el-form-item label="提交人">
              {{ form.admin_name }}
            </el-form-item>
            <el-form-item label="商品名称">
              {{ form.goods_name }}
            </el-form-item>
            <el-form-item label="商品原价">
              ￥{{ form.goods_price }}
            </el-form-item>
            <el-form-item label="商品金额">
              ￥{{ form.goods_money }}
            </el-form-item>
            <el-form-item label="订单号">
              {{ form.order_number }}
            </el-form-item>
            <el-form-item label="购买时间">
              {{ form.buy_time }}
            </el-form-item>
            <el-form-item label="购买时长">
              {{ form.buy_length }}月
            </el-form-item>
            <el-form-item label="备注">
              {{ form.remarks }}
            </el-form-item>
            <el-form-item label="拒绝备注">
              <el-input v-model="form.refuse_remarks" type="textarea" rows="4"/>
            </el-form-item>
          </el-col>
          <el-col :span="1" class="line">
            <div/>
          </el-col>
          <el-col :span="10">
            <el-form-item label="销售凭证" prop="title">
              <el-image
                v-for="item in form['sale_proof']" :key="item"
                :src="item"
                :preview-src-list="form['sale_proof']"
                style="width: 100px; height: 100px;margin-right: 20px;"/>
            </el-form-item>
            <el-form-item label="是否参与业绩计算">
              <el-radio-group v-model="form.ach_state">
                <el-radio :label="0">参与</el-radio>
                <el-radio :label="1">不参与</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否有提成">
              <el-radio-group v-model="form.after_type" @change="getRuleList">
                <el-radio :label="4">比例规则</el-radio>
                <el-radio :label="3">固定规则</el-radio>
                <el-radio :label="2">手动输入</el-radio>
                <el-radio :label="1">无提成</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="售后人员">
              <el-select v-model="form.after_sale_id" placeholder="请选择售后人员" filterable>
                <el-option v-for="item in usersList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item v-if="form.after_type>2" label="提成规则">
              <el-select v-model="form.sbr_id" placeholder="请选择提成规则" @change="bindRuleChange">
                <el-option v-for="item in ruleList" :key="item.id" :label="item.rule_name" :value="item.id"/>
              </el-select>
              <el-alert v-if="form.sbr_id" :closable="false" :title="ruleContent"type="info"/>
            </el-form-item>
            <el-form-item v-if="form.after_type === 2" label="销售提成">
              <el-input v-model="form.order_bonus"/>
            </el-form-item>
            <el-form-item v-if="form.after_type===2" label="奖金金额">
              <el-input v-model="form.bonus_money"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-button :disabled="loading" :loading="loading" type="success" class="do-btn"
                     @click="submitForm('form',true)">同 意
          </el-button>
          <el-button type="danger" @click="submitForm('form',false)">拒 绝</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      const checkCommission = (rule, value, callback) => {
        if (value === '' && this.form.after_type === 2) {
          callback(new Error('请输入售前提成金额'))
        } else {
          callback()
        }
      }
      return {
        imageUrl: '',

        dialogVisible: false,
        dialogImageUrl: '', // 预览的图片

        usersList: [], // 系统用户列表
        ruleList: [], // 规则列表
        ruleContent: '', // 规则详情

        form: {
          member_name: '',
          ach_state: 0,
          after: 0,
          after_type: 4
        },
        formRules: {
          commission_before: [
            { validator: checkCommission, trigger: 'blur' }
          ]
        },
        loading: false
      }
    },
    watch: {},
    created() {
      this.id = this.$route.query.id
      this.getData()
      this.getUsersList()
      this.getRuleList()
    },
    methods: {
      getData() {
        const url = 'achievement/detail/' + this.id
        this.$store.dispatch('GetConnect', { url }).then(res => {
          const temp = res.data
          temp['ach_state'] = 0
          temp['after_type'] = 4
          temp.after = 0
          temp['sbr_id'] = null
          temp.pic_list = []
          temp['after_money'] = 0
          temp['bonus_money'] = 0
          for (let i = 0; i < res.data.sale_proof.length; i++) {
            temp.pic_list.push({ 'url': this.imageUrl + res.data.sale_proof[i] })
          }
          this.form = temp
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },

      /**
       *  获取系统用户列表
       *  接口:'user/all-list'
       */
      getUsersList() {
        const url = 'user/all-list'
        this.$store.dispatch('GetConnect', { url }).then(res => {
          this.usersList = res.data
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },

      /**
       *  获取规则列表
       *  接口:'salerule/all-list'
       */
      getRuleList() {
        const url = 'salerule/all-list'
        const data = {
          type: this.form.after_type === 3 ? 2 : 1
        }
        this.$store.dispatch('GetConnect', { url, data }).then(res => {
          this.ruleList = res.data
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      },

      bindRuleChange(e) {
        for (let i = 0; i < this.ruleList.length; i++) {
          if (e === this.ruleList[i].id) {
            this.ruleContent = this.ruleList[i].ruleCompute;
          }
        }
      },

      submitForm(formName, status) {
        this.loading = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const data = this.form
            if (data.after_type === 2 && (data.after_money === null || data.after_money === '')) {
              this.$message.error('请输入售后提成金额')
              this.loading = false
              return
            }
            if (data.after_type === 2 && (data.bonus_money === null || data.bonus_money === '')) {
              this.$message.error('请输入售后提成金额')
              this.loading = false
              return
            }
            if (data.after_type === 3 || data.after_type === 4) {
              data.after_type = 0
            }
            const url = status ? 'achievement/verify/' + this.id : 'achievement/ajax/' + this.id
            !status && (data.action = 'refuse')
            this.$store.dispatch('GetConnect', { url, data }).then(res => {
              this.$message.success(res.msg)
              this.$router.back(-1)
            }).catch((err) => {
              this.loading = false
              this.$message.error(err.msg)
            })
          } else {
            this.loading = false
            this.$message.error('提交失败,请检查必填项')
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },

      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .box-1 {
    width: 98%;
    //max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }

    .el-form {
      //max-width: 900px;
      max-width: 100%;

      .title {
        font-weight: 600;
      }

      .remark {
        font-size: 13px;
        color: $textGray;
      }

      .el-button {
        width: 150px;
        margin: 0 15px;
      }

      img {
        width: 25%;
        margin-right: 5%;
      }
    }

    .line {
      @include flex-row(center, center);

      div {
        height: 340px;
        width: 1px;
        background: #b7b7b7;
      }
    }
  }

  .do-btn {
    @extend .bg-green;
    margin-left: 6px;
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }

  .el-radio + .el-radio {
    margin-left: 0;
  }

  .el-radio {
    line-height: 40px;
    margin-right: 30px;
  }
</style>
